<template>
	<view class="container">
		<TopBtn :title="'线上停诊时间 '"></TopBtn>
		<view class="info">
			<view class="currency_card mb_30 pb_47">
				<view class="currency_title mb_30">
					停诊时间
				</view>
				<view class="text flex-sp-center">
					<view class="timeBox">
						<picker mode="time" :value="time" start="09:00" end="21:00" @change="bindTimeChange">
							<view class="flex-center-center">
								<image src="@/static/CommonTools/time.png" mode=""></image>
								<view v-if="time" class="">{{time}}</view>
								<view v-else class="placeholder">
									开始时间
								</view>
							</view>
						</picker>
					</view>
					—
					<view class="timeBox">
						<picker mode="time" :value="time" start="09:00" end="21:00" @change="bindTimeChange">
							<view class="flex-center-center">
								<image src="@/static/CommonTools/time.png" mode=""></image>
								<view v-if="time" class="">{{time}}</view>
								<view v-else class="placeholder">
									开始时间
								</view>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="warning currency_card  pb_37">
				<view class="title flex-center">
					<image src="@/static/CommonTools/warning.png" mode=""></image> 服务内容
				</view>
				<view class="text">
					1、问诊期间不限交流次数，有效期最长48小时 <br />
					2、语音问诊和视频问诊建议与客户约定好问诊时间
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time: ''
			}
		},
		methods: {
			bindTimeChange: function(e) {
				this.time = e.detail.value
			},
		}
	}
</script>

<style lang="less" scoped>
	
	.info {
		padding: 30rpx;
	}
	.placeholder{
		font-size: 28rpx;
		color: rgba(153, 153, 153, 0.8);
	}
	.timeBox{
		width: 293rpx;
		height: 80rpx;
		background: #FAFAFA;
		border-radius: 20rpx;
		text-align: center;
		font-size: 28rpx;
		line-height: 80rpx;
		image{
			width: 27rpx;
			height: 27rpx;
			margin-right: 16rpx;
		}
	}

	.warning {
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 15rpx;
		}

		font-weight: 500;
		font-size: 28rpx;
		color: #333333;

		.text {
			color: #999;
		}
	}
</style>